<template>
    <div class="Disscuss" v-if="info.list && info.list.length != 0">
        <div class="ds_top" v-if="false">
            <h1>
                <textarea
                    placeholder="文明上网，不传谣言，登录评论！"
                ></textarea>
            </h1>
            <h2 :class="ifmargin ? 'active_btn' : ''">
                <h3 class="ds_btn"><span>发表评论</span></h3>
            </h2>
        </div>

        <div class="hp_title">
            <h1>全部评论</h1>
        </div>

        <ul class="ds_list">
            <li v-for="(item, index) in info.list" :key="index">
                <dl>
                    <dd v-if="item.from_user">
                        <img :src="item.from_user.avatar_url" alt="" />
                    </dd>
                    <dt>
                        <h1 v-if="item.from_user">
                            {{ item.from_user.identity_name }}
                        </h1>
                        <p>
                            {{ item.content }}
                        </p>
                        <h2>{{ item.create_time_desc }}</h2>
                    </dt>
                </dl>
            </li>
        </ul>
        <div class="load" v-if="info.list && info.list.length == 0">
            <span>暂无评论</span>
        </div>
    </div>
</template>

<script>
import { axiosGet } from '../server/axios';
export default {
    name: 'DissCuss',
    props: ['id', 'ifmargin'],
    data() {
        return {
            info: {},
        };
    },
    mounted() {
        console.log(this.ifmargin);
        this.getDetial();
    },
    methods: {
        getDetial() {
            axiosGet(
                `/api/articles/${this.$router.history.current.query.id}/comments`,
                {
                    page: 1,
                    limit: 10,
                },
                (res) => {
                    console.log(res.data);
                    if (res.code != 'ok') {
                        this.$notify({
                            title: '警告',
                            message: res.msg,
                            type: 'warning',
                        });
                    }
                    this.info = res.data;
                }
            );
        },
    },
};
</script>
<style scoped lang="scss">
.Disscuss {
    overflow: hidden;
    margin-top: 30px;
}
.ds_top {
    textarea {
        width: 690px;
        height: 177px;
        background: #ffffff;
        border: 1px solid #f2f2f2;
        display: block;
        margin: 0 auto;

        min-height: 151px;
        border-radius: 4px;
        outline: #e60012;
        font-size: 16px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #000000;
        padding: 0 20px;
        padding: 10px 20px;
    }
    h2 {
        height: 50px;
        background: #fbfbfb;
        border: 1px solid #f2f2f2;
        margin: 0 18px;
    }
    .active_btn {
        margin: 0;
    }
    .ds_btn {
        width: 120px;
        height: 50px;
        background: #262626;
        font-size: 16px;
        font-family: Source Han Sans SC VF;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        float: right;
    }
}
.ds_list {
    li {
        width: 730px;
        overflow: hidden;
        min-height: 40px;
        margin: 0 20px;
        padding: 20px 0;
        border-bottom: 2px solid #f6f6f6;

        dl {
            display: flex;
            justify-content: space-between;

            dd {
                width: 41px;
                height: 41px;
                overflow: hidden;
                border-radius: 50%;

                img {
                    width: 100%;
                }
            }
            dt {
                width: 678px;

                h1 {
                    font-size: 14px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #262626;
                    line-height: 30px;
                }

                p {
                    font-size: 14px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #787878;
                    margin: 6px auto 24px;
                    line-height: 22px;
                }

                h2 {
                    font-size: 14px;
                    font-family: Source Han Sans SC VF;
                    font-weight: 400;
                    color: #a7a7a7;
                }
            }
        }
    }
}
.load {
    margin: 0 20px;
}
</style>
